<!--
 * @Description: 里程校验算法 milageAlgorithm
 * @Author: Wei li zhang
 * @Date: 2021-04-09 11:49:17
 * @LastEditTime: 2023-05-31 10:24:17
 * @LastEditors: zhangweili zhang_weili@uxsino.com
-->
<template>
  <div class="app-container v-flex">
    <filter-form :form="listQuery" :data="filterData" :has-default-operation="false" @search="search">
      <el-date-picker
        v-model="listQuery.startTime"
        value-format="yyyy-MM-dd"
        type="date"
        class="eldateNewS"
        placeholder="开始时间"
        :picker-options="pickerFindStartDate"
        :clearable="true"
        style="margin-right: 10px;"
        size="mini" />
      <el-date-picker
        v-model="listQuery.endTime"
        value-format="yyyy-MM-dd"
        type="date"
        class="eldateNewS"
        placeholder="结束时间"
        :picker-options="pickerFindEndDate"
        :clearable="true"
        style="margin-right: 10px;"
        size="mini" />
      <el-button
        class="search-btn"
        size="mini"
        type="primary"
        icon="el-icon-search"
        @click="search">查询</el-button>
      <el-button
        class="refresh-btn"
        size="mini"
        type="primary"
        icon="el-icon-refresh"
        @click="resetListQuery">重置</el-button>

    </filter-form>
    <div style="padding-top: 10px">
      <el-button
        style="margin:0 0px 6px 10px;float:right"
        title="选择文件后上传"
        :disabled="!fileList.length"
        icon="el-icon-document"
        size="mini"
        @click="submitUpload()">上传</el-button>
      <el-upload
        ref="upload"
        style="float:right;display:flex;justify-content:center;align-items: center;"
        with-credentials
        :action="action"
        accept=".xls, .xlsx"
        name="file"
        :headers="headers"
        :file-list="fileList"
        :on-progress="uploading"
        :on-change="onChange"
        :on-remove="onRemove"
        :auto-upload="false"
        :show-file-list="showFileLists"
        title="请选择1C原始数据导出文件"
        :on-success="uploadSuccess">
        <el-button slot="trigger" icon="el-icon-document" size="mini">选择文件</el-button>
      </el-upload>

    </div>
    <div ref="main" class="v-flex-elastic">
      <base-table
        :height="height"
        :loading="tableData.loading"
        :data="tableData.tableList"
        :columns="tableData.columns"
        :show-index="tableData.showIndex"
        :show-selection="tableData.showSelection"
        :show-filter-column="tableData.showFilterColumn"
        :operaton-width="tableData.operatonWidth"
        :default-operations="tableData.defaultOperations"
        :has-auth="tableData.hasAuth"
        :row-show-color="tableData.rowShowColor">
        <template slot="status" slot-scope="{ row }">
          <div v-if="row.status == 0">已上传</div>
          <div v-else-if="row.status == 1">已计算</div>
        </template>
        <template slot="operations" slot-scope="{ row, $index }">
          <el-button
            v-if="row.status == 0"
            size="mini"
            class="td-btn-operation"
            @click="compluteClick(row, $index)">计算</el-button>
          <el-button
            v-else-if="row.status == 1"
            icon="el-icon-document"
            size="mini"
            @click.native="compluteDown(row, $index)">下载结果</el-button>

        </template>
      </base-table>
    </div>
    <!-- 分页 -->
    <div class="page-box">
      <pagination
        :total="tableData.total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="changePageOption" />
    </div>
    <!-- 分页 -->
    <el-dialog
      title="导入结果"
      :visible.sync="dialogVisible"
      width="30%">
      <div class="dialogResult">
        <span style="color:red">{{ dialogResult }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { milageAlgorithm, getListPage } from '@/api/cms/algorithm/milagealgorithm'
import { getToken } from '@/utils/auth'
import { tableMixin } from '@/utils/public'
import { parseTime } from '@/utils'

export default {
  name: 'Name',
  components: {
  },
  mixins: [tableMixin],
  data() {
    return {
      // 顶部操作栏配置
      filterData: {
        fileName: {
          key: 'fileName',
          type: 'input',
          placeholder: '文件名称'
        },
        status: {
          key: 'status',
          type: 'select',
          placeholder: '状态',
          options: [
            { name: '文件上传', value: '0' },
            { name: '已计算', value: '1' },
            { name: '计算失败', value: '2' }
          ],
          props: { label: 'name', value: 'value' }
        }
      },
      // 时间区间选择
      pickerFindStartDate: this.handleFindStartDate(),
      pickerFindEndDate: this.handleFindEndDate(),
      // 查询列表请求参数
      listQuery: {
        page: 1,
        size: 20,
        fileName: '',
        status: '',
        startTime: '',
        endTime: '',
        type: '2'
      },
      showFileLists: true,
      loadProgress: 0, // 动态显示进度条
      progressFlag: false, // 关闭进度条
      dialogVisible: false,
      dialogResult: '',
      path: '',
      loadingInstance: null,
      loadingwait: false,
      // 顶部操作栏配置
      fileList: [],
      action: process.env.VUE_APP_BASE_API + '/cms/JcjcAlgorithmOperateLog/upload?type=2',
      // 'http://localhost:10248/cms/JcjcRowDataImportLog/upload',
      // process.env.VUE_APP_BASE_API + '/cms/JcjcRowDataImportLog/upload',
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      // 表格高度
      height: 0,
      tableData: {
        loading: false,
        tableList: [],
        total: 0,
        columns: [
          { prop: 'fileName', label: '导入文件名称' },
          { prop: 'status', label: '导入状态', width: 150, template: true },
          { prop: 'createDatetime', width: 300, label: '导入时间', formatter: row => parseTime(row.createDatetime, '{y}-{m}-{d} {h}:{i}:{s}') }
          // { prop: 'remark', showOverflowTooltip: 'N', label: '导入结果' }
        ],
        showIndex: true,
        showSelection: false,
        showFilterColumn: false,
        operatonWidth: '160px',
        defaultOperations: [],
        hasAuth: true,
        rowShowColor: { name: 'name', value: 0 }
      }
    }
  },
  watch: {
    loadingwait(val) {
      if (val) {
        this.loadingInstance = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.1)'
        })
      } else {
        this.loadingInstance.close()
      }
    }
  },
  created() {
    this.getListPage()
  },
  activated() {

  },
  mounted() {},
  methods: {
    // 查询发现开始日期控制
    handleFindStartDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.listQuery.endTime) {
            return new Date(self.listQuery.endTime) - 8.64e6 < time.getTime()
          }
        }
      }
    },
    // 查询发现结束日期控制
    handleFindEndDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.listQuery.startTime) {
            return new Date(self.listQuery.startTime) - 8.64e7 > time.getTime()
          }
        }
      }
    },
    // 查询
    search() {
      this.listQuery.page = 1
      this.getListPage()
    },
    // 重置查询
    resetListQuery() {
      this.listQuery = {
        page: 1,
        size: 20,
        fileName: '',
        status: '',
        startTime: '',
        endTime: '',
        type: '2'
      }
      this.tableData.tableList = []

      this.getListPage()
    },
    // 上传
    submitUpload() {
      if (this.fileList.length > 0) {
        this.$refs.upload.submit()
      } else {
        this.notifiyError('请选择文件')
      }
    },
    // uploadSuccess(response, file, fileList) {
    //   this.loadingwait = true;
    //   if (response.status !== 200) {
    //     this.notifiyError("上传失败");
    //     setTimeout(() => {
    //       this.loadingwait = false;
    //     }, 800);
    //     // this.getListPage()
    //   } else {
    //     if (response.data) {
    //       this.path = response.data;
    //     }
    //     setTimeout(() => {
    //       this.loadingwait = false;
    //     }, 800);
    //     this.notifiySuccess("上传成功");
    //   }
    // },
    // uploading() {
    //   // this.getListPage()
    //   this.progressFlag = true; // 显示进度条
    //   this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
    //   if (this.loadProgress >= 100) {
    //     this.loadProgress = 100;
    //     setTimeout(() => {
    //       this.progressFlag = false;
    //     }, 1000); // 一秒后关闭进度条
    //   }
    // },
    onChange(file, fileList) {
      this.fileList = fileList
    },
    onRemove(file, fileList) {
      this.fileList = fileList
    },
    compluteClick(row) {
      milageAlgorithm({ id: row.id }).then(response => {
        var resData = response.status
        if (response.status == '200') {
          // this.compluteDownBtn = !this.compluteDownBtn;
          this.notifiySuccess('计算成功')
          this.getListPage()
        } else {
          this.notifiyError('计算失败')
        }
      })
    },
    compluteDown(row) {
      var url = process.env.VUE_APP_BASE_API + '/cms/JcjcAlgorithmOperateLog/download?1=1'
      if (row.id) {
        url += '&id=' + row.id
      }

      url += '&access_token=' + getToken()
      var fileName = '下载结果.xls'
      window.location.href = url
    },
    getListPage() {
      this.loadProgress = 0 // 动态显示进度条
      this.progressFlag = false // 关闭进度条
      this.tableData.loading = true
      getListPage(this.listQuery).then(response => {
        this.tableData.tableList = response.data.records
        this.tableData.loading = false
      }).catch(() => {
        this.tableData.loading = false
      })
    },
    // 改变分页配置
    changePageOption(data) {
      this.listQuery.page = data.page
      this.listQuery.size = data.size
      this.getListPage()
    },

    uploadSuccess(response, file, fileList) {
      if (response.status !== 200) {
        this.notifiyError(response.message)

        this.showFileLists = true
        // this.getListPage()
      } else {
        if (response.message) {
          this.dialogResult = response.message
          this.dialogVisible = !this.dialogVisible
        }

        this.showFileLists = false
        this.getListPage()
      }

      // this.getEmergencyDutyDataList() // 查询应急值班信息列表
    },

    uploading() {
      // alert('文件正在上传，请稍后查看结果')
      // this.getListPage()
      this.progressFlag = true // 显示进度条
      this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
      if (this.loadProgress >= 100) {
        this.loadProgress = 100
        setTimeout(() => { this.progressFlag = false }, 1000) // 一秒后关闭进度条
      }
    }

  }
}
</script>
<style scoped lang="scss">
.el-dialog--center .el-dialog__footer {
  text-align: center;
}
.dialogResult{
  text-align: center;
}
/deep/ .el-upload-list__item:first-child{
  margin-top:0
}
</style>

